<template>
  <div class="flowCanvas">
    <div class="container" ref="container"></div>
    <!-- 节点面板 -->
    <CustomNodePanel v-if="lf" :lf="lf"></CustomNodePanel>
    <!-- 数据面板 -->
    <BpmnDataPanel v-if="lf" :lf="lf"></BpmnDataPanel>
    <!-- 弹窗编辑 -->
    <el-drawer
      title="编辑节点"
      :modal="false"
      v-model="drawer"
      :direction="'rtl'"
    >
      <div>节点ID: {{ currentNode.data.id }}</div>
      <div>
        节点名称:
        {{
          currentNode.data.text
            ? currentNode.data.text.value
            : "没有配置节点text值"
        }}
      </div>
      <el-form>
        <el-form-item label="yyfyyf">
          <el-input v-model='currentNode.data.properties.requestMessage.requestBody' ></el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import {
  BpmnElement,
  BpmnXmlAdapter,
  Snapshot,
  Control,
  Menu,
  SelectionSelect,
} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";
import CustomNodePanel from "./components/CustomNodePanel.vue";
import BpmnDataPanel from "./components/BpnmDataPanel.vue";
import { onMounted, ref } from "vue";

export default {
  name: "logicflowCustom",
  components: { CustomNodePanel, BpmnDataPanel },

  setup() {
    const lf = ref(null);
    const drawer = ref(false);
    const currentNode = ref(null);
    const container = ref(null)

    function bindEvent(eventCenter) {
      eventCenter.on("node:click", (args) => {
        console.log("节点单击", args);
        drawer.value = true;
        debugger
        currentNode.value = args;
      });
    }

    onMounted(() => {
      LogicFlow.use(BpmnElement);
      LogicFlow.use(BpmnXmlAdapter);
      LogicFlow.use(Snapshot);
      LogicFlow.use(Control);
      LogicFlow.use(Menu);
      LogicFlow.use(SelectionSelect);
      //初始化
      lf.value = new LogicFlow({
        container: container.value,
        grid: {
          size: 10,
          visible: true,
          type: "mesh",
          config: {
            color: "#ababab",
            thickness: 1,
          },
        },
      });
      lf.value.render();
      //绑定事件
      const { eventCenter } = lf.value.graphModel;
      bindEvent(eventCenter);
    });

    return { lf, drawer, currentNode, container };
  },
};
</script>

<style>
.flowCanvas {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0px;
  display: flex;
}
.flowCanvas .container {
  display: flex;
  flex-grow: 1; /*铺满剩余空间*/
  border: 3px solid #ababab;
  overflow: hidden;
}
</style>
